<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
  <script src="{$Think.config.httpFlag}{$Think.config.google_map_url}" async="async"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .layui-upload-img{
      width: 100px;
    }
  </style>
</head>
<body>
<div style="margin-top: 20px;">
</div>

<form class="layui-form" id="admin">

  <div class="layui-form-item">
    <label class="layui-form-label">所属国家</label>
    <div class="layui-input-inline">
      <input name="groupid" value="{$groupid}" type="hidden">
      <input name="countryname" value="{$country}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" readonly type="text">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">中文名</label>
    <div class="layui-input-inline" style="position: relative">
      <input name="name" id="chname" value="{notempty name="$menu"}{$menu['name']}{/notempty}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
      <div id="addressbox"></div>
    </div>
  </div>


  <div id="map" style="margin-left: 110px;width: 600px;height: 200px;margin-bottom: 30px">

  </div>

  <input name="lat" id="lat" value="{notempty name='$menu'}{$menu['lat']}{/notempty}"type="hidden">
  <input name="lng" id="lng" value="{notempty name='$menu'}{$menu['lng']}{/notempty}" type="hidden">

  <div class="layui-form-item">
    <label class="layui-form-label">英文名</label>
    <div class="layui-input-inline">
      <input name="eng_name" id="enname" value="{notempty name="$menu"}{$menu['eng_name']}{/notempty}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
    </div>
  </div>


  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block" style="max-width:500px;">
      <textarea placeholder="请输入内容"  class="layui-textarea" name="description">{notempty name="$menu"}{$menu['description']}{/notempty}</textarea>
    </div>
  </div>


  <div class="layui-form-item" style="margin:0 110px ">
    <div class="layui-upload">
      <button type="button" class="layui-btn" id="test2">图片上传</button>
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="demo2"></div>
      </blockquote>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

</form>


<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>

<script>
  layui.use('upload', function(){
    var upload = layui.upload;
    //执行实例
    var uploadInst = upload.render({
      elem: '#thumb' //绑定元素
      ,url: "{:url('common/upload')}" //上传接口
      ,done: function(res){
        //上传完毕回调
        layer.closeAll('loading');
        if(res.code == 2) {
          $('#demo1').attr('src',res.src);
          $('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.src +'">');
        } else {
          layer.msg(res.msg);
        }
      }
      ,error: function(){
        //请求异常回调
        layer.closeAll('loading');
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
      ,before:function () {
        layer.load(2);
      }
    });

    //多图片上传
    upload.render({
      elem: '#test2'
      ,url: '/upload/'
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
        });
      }
      ,done: function(res){
        //上传完毕
      }
    });
  });
</script>
<script>
  layui.use(['layer', 'form'], function() {
    var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
    $(window).on('load', function() {
      form.on('submit(admin)', function(data) {
        $.ajax({
          url:"{:url('admin/City/addcountry')}",
          data:$('#admin').serialize(),
          type:'post',
          async: false,
          success:function(res) {
            layer.msg(res.msg);
            if(res.code == 1) {
              setTimeout(function(){
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
              },1500)
            }
          }
        })
        return false;
      });

      //地图功能
        var geocoder;
        var map2;
        //实际查询地址
        //var query = "辽宁沈阳文化路三号巷11号";
        //var query = "东北大学北门";
        //显示名称
        //var display = "<b>单位: </b>东北大学";
        function initialize() {
        geocoder = new google.maps.Geocoder();
        var myOptions = {
        zoom : 10,//缩放比例
        //地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE
        //•MapTypeId.HYBRID •MapTypeId.TERRAIN
        center:new google.maps.LatLng(39.90419989999999, 116.40739630000007),
        mapTypeId : google.maps.MapTypeId.ROADMAP
      }
        map2 = new google.maps.Map(document.getElementById("map"),
        myOptions);
        codeAddress();
      }
        var marker=new google.maps.Marker();
        function codeAddress(address) {

        //地址解析
        geocoder.geocode({
        'address' : address
      }, function(results, status) {
        console.log(results);
        if (status == google.maps.GeocoderStatus.OK) {
        //依据解析的经度纬度设置坐标居中

        map2.setCenter(results[0].geometry.location);
//                alert(results[0].geometry.location);//坐标
        // alert(results[0].formatted_address);//地址
        marker = new google.maps.Marker({
        map : map2,
        position : results[0].geometry.location,
        title : address,
        //坐标动画效果
        animation : google.maps.Animation.DROP
      });
        marker.setMap(map2);

//                var display = "地址: " + results[0].formatted_address;
//                var infowindow = new google.maps.InfoWindow({
//                    content : "<span style='font-size:11px'><b>名称: </b>"
//                    + address + "<br>" + display + "</span>",
//                    //坐标偏移量，一般不用修改
//                    pixelOffset : 0,
//                    position : results[0].geometry.location
//
//                });
//                //默认打开信息窗口,点击做伴弹出信息窗口
//
//                infowindow.open(map2, marker);
//                google.maps.event.addListener(marker, 'click', function() {
//
//                    infowindow.open(map2, marker);
//                });
      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
      });
      }

      function Address() {
        var address = document.getElementById("chname").value;
        var addressbox="";
        //地址解析
        geocoder.geocode({
          'address' : address
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            for(var i in results){
              if(i>4){
                break;
              }
              addressbox+="<span>"+results[i].formatted_address+"</span>";
            }
            $("#addressbox").html(addressbox);
          } else {
          }
        });
      }


        initialize();
        $("#chname").on("input",function(){
          $("#addressbox").html("");
          Address();
      });

      $("#addressbox").on("click","span",function(){
        marker.setMap(null);
        $("#enname").val($(this).html().split(",")[0]);
        codeAddress($(this).html());
      });
      $("body").on("click",function(){
        $("#addressbox").html("");
      })
    });
  });
</script>
</body>
</html>
